import React, { useEffect, useState } from 'react'
import { Pagination, Timeline, Space } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import { goodsPutAwayRecordList } from '@/api/goodsManagement/goodsList.js';
import TheImage from '@/components/TheImage';
import '../style/style.scss';

export default function ApplyRecord(props) {
  const storeGoodsId = props.storeGoodsId //店铺商品id
  const [timelineData, setTimelineData] = useState([]); // 数据
  const [pageData, setPageData] = useState({ pageNo: 1, pageSize: 10, total: 0 }) //分页参数
  useEffect(() => {
    getData({ pageNo: pageData.pageNo, pageSize: pageData.pageSize })
  }, [])

  const getData = async (value) => {
    await goodsPutAwayRecordList({ storeGoodsId, ...value }).then(res => {
      if (res.code === 0) {
        let data = []
        data = res.data.map(item => {
          let operatorType = '', images = []
          switch (item.operatorType) {
            case 0:
              operatorType = '平'
              break
            case 1:
              operatorType = '商'
              break
            default:
              operatorType = ''
          }
          images = item.images ? item.images.split(',') : []
          item.operatorType = operatorType //操作平台
          item.images = images //图片
          return item
        })
        setTimelineData(data)
        setPageData({ pageNo: res.pageNo, pageSize: res.pageSize, total: res.totalCount })
      }
    })
  }
  // 分页切换
  const pageChange = (pageNo, pageSize) => {
    setPageData({ pageNo: pageNo, pageSize: pageSize })
    getData({ pageNo, pageSize })
  }
  return (
    <div style={{ margin: '20px 10px 0', }}>
      {
        timelineData && <div>
          <Timeline style={{maxHeight:500}} items={timelineData.map((item, index) => {
            return {
              dot: <span className='icon-text'>{item.operatorType}</span>,
              children: (
                <div className="timeline-content" key={index}>
                  <div className="timeline-content-title">
                    <div>{item.typeName}</div>
                    <div>{item.createTime}</div>
                  </div>
                  <div className="timeline-content-reason">{item.remark}</div>
                  <Space className="timeline-content-img">
                    {
                      item.images.map((v, i) => {
                        // console.log(v, 'images');
                        return <TheImage key={i} src={[v]} width={50} height={50} />
                      })
                    }
                  </Space>
                </div>
              )
            }
          })}></Timeline>
          <Pagination style={{textAlign:'center',marginTop:20}} total={pageData.total} current={pageData.pageNo} pageSize={pageData.pageSize} showSizeChanger={false} onChange={pageChange} />
        </div>
      }

    </div>
  )
}
